<template>
  <div class="content">
    <div>
      <el-button  type="primary"  size="mini" @click="goAdd">新增分类</el-button>
    </div>
    <div class="accountCon">
      <!--列表-->
      <el-row>
        <el-col :span="24">
          <el-table
            :data="list"
            size="small"
            border
            row-key="id"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
            :header-cell-style="$style.rowClass"
          >
            <ElTableColumn label="序号" type="index" width="55" />
            <ElTableColumn label="类目名称"  prop="name" width="260"/>
            <ElTableColumn label="类目级别" align="center">
              <template slot-scope="{ row }">
                <div>{{row.level == 1 ? '一级类目' : row.level == 2 ? '二级类目': row.level == 3 ? '三级类目' : ''}}</div>
              </template>
            </ElTableColumn>
            <ElTableColumn label="新增时间" prop="create_time" align="center" />
            <ElTableColumn label="状态" align="center">
              <template slot-scope="{ row }">
                <div>{{row.status == 1 ? '启用' : row.status == 2? '禁用': ''}}</div>
              </template>
            </ElTableColumn>
            <ElTableColumn label="操作"  fixed="right" align="center">
              <template  slot-scope="{ row }" >
                <span class="theme " @click="tapBtn('read',row)"> 查看</span>
                <span class="theme " @click="tapBtn('edit',row)"> 编辑</span>
              </template>  
            </ElTableColumn>
          </el-table>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import pagination from '@/components/Pagination'
import { goodsTypeList} from '@/api/goods';
class Search {
  name = ''; 
  status = ''; 
  date = [];
  type = [];
}
class Options {
  typeList = []; // 类目选择
  statusList = [ // 是否禁用
    { label: '是', value: 2 },
    { label: '否', value: 1 }
  ]
}
export default {
  name: 'ClassifyList',
  components: {
    pagination
  },
  data () {
    return {
      search: new Search(), // 检索条件
      options: new Options(), //选项
      list: [], // 数据展示
    }
  },

  mounted () {
    this.getList();
  },
  methods: {
    goAdd () {
      this.$router.push({name:'添加品项分类'})
    },
    // 获取列表
    getList () {
      goodsTypeList({type:'all',status:'all'}).then(res => {
        this.list = res.data;
      })
    },
    // 点击详情
    tapBtn (type,row) {
      this.$router.push({name:'添加品项分类',query:{row:JSON.stringify(row),type:type}})
    },

  }
}
</script>

<style lang="scss" scoped>

.bgW {
  background: #fff;
  border-radius: 3px;
  margin-bottom: 20px;
}
.el-form-item {
  margin: 5px  40px  3px 0 ;
}
.el-input--mini{
  width: 120px; 
}
.el-select{
  width: 120px;
}
.el-date-editor.el-input, .el-date-editor.el-input__inner{
  width: 200px; 
}
.el-form-item{
  margin: 5px 10px 3px 0 ;
}

.accountCon{
    background: #fff;
    padding: 10px 0px 80px;
}
</style>
